<template>
    <div >
            <h1>提示信息组件</h1>
             <el-button :plain="true" @click="open1">打开消息提示</el-button>
              <el-button :plain="true" @click="open2">成功</el-button>
    
          <h1>MessageBox 弹框</h1>
          <el-button type="text" @click="open3">点击打开 Message Box</el-button>
         <el-button type="text" @click="open4">点击打开 Message Box</el-button>
         <el-button type="text" @click="open5">点击打开 Message Box</el-button>
    
        <h1>Popconfirm 气泡确认框</h1>
        <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-question"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="test1"
            @cancel="test2"
            >
            <el-button slot="reference">删除</el-button>
            </el-popconfirm>
    
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {}
    },
    components: {},
    methods: {
        open1(){
          this.$message('这是一条消息提示');
        },
        open2(){
            this.$message({
                message: '恭喜你，这是一条成功消息',
                type: 'success',
                 showClose: true,
                 duration:800,
                 offset:50
               });
        },
        open3(){
            this.$alert('这是一段内容', '标题名称', {
                confirmButtonText: 'ok',
                callback: action => {
                    this.$message({
                    type: 'info',
                    message: `本次操作: ${ action }`
                    });
                }
                });
        },
        open4(){
              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                    }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });          
                    });
        },

        open5(){
             this.$prompt('请输入邮箱', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: '你的邮箱是: ' + value
                    });
                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });       
                });
        },

        test1(){
          this.$message({
              message:"点击确认",
              type:'success'
          })
        },
        test2(){
               this.$message({
              message:"点击取消",
              type:'info'
          })
        }

    }
}
</script>

<style  scoped>
</style>
